/*
* Tencent is pleased to support the open source community by making WeUI available.
* 
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
* 
* Licensed under the MIT License (the "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
* 
*       http://opensource.org/licenses/MIT
* 
* Unless required by applicable law or agreed to in writing, software distributed under the License is
* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the specific language governing permissions and
* limitations under the License.
*/

.setCircleLoading(@color:currentColor,@size:80px,@wide:7px) {
    display: inline-flex;
    position: relative;
    width: @size;
    height: @size;
    vertical-align: middle;
    color: @color;
    animation: circleLoading 1s steps(60, end) infinite;

    &:before,
    &:after {
        content: "";
        display: block;
        width: @size/2;
        height: @size;
        box-sizing: border-box;
        border: @wide solid;
        border-color: currentColor;
    }

    &:before {
        border-right-width: 0;
        border-top-left-radius: @size;
        border-bottom-left-radius: @size;
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 0.3) 95%);
    }
    &:after {
        border-left-width: 0;
        border-top-right-radius: @size;
        border-bottom-right-radius: @size;
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.3) 95%);
    }
    &__dot {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -@wide/2;
        width: @wide;
        height: @wide;
        border-top-right-radius: @wide;
        border-bottom-right-radius: @wide;
        background: currentColor;
    }

    @keyframes circleLoading {
        0% {
            transform: rotate3d(0, 0, 1, 0deg);
        }

        100% {
            transform: rotate3d(0, 0, 1, 360deg);
        }
    }
}
